<template>
  <div>
    <div class="emotion-box" :style="{ height: height + 'px' }">
      <div class="emotion-box-line" v-for="(line, i) in list" :key="i">
        <emotion
          class="emotion-item"
          v-for="(item, i) in line"
          :key="i"
          @click.native="clickHandler(item)"
          >{{ item }}</emotion
        >
      </div>
    </div>
  </div>
</template>

<script>
import Emotion from "./Emotion";
export default {
  props: {
    height: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      list: [
        ["微笑", "撇嘴", "色", "发呆", "得意", "流泪", "害羞", "闭嘴"],
        ["睡", "大哭", "尴尬", "发怒", "调皮", "呲牙", "惊讶", "难过"][
          ("酷", "冷汗", "抓狂", "吐", "偷笑", "可爱", "白眼", "傲慢")
        ],
        ["饥饿", "困", "惊恐", "流汗", "憨笑", "大兵", "奋斗", "咒骂"],
        ["疑问", "嘘", "晕", "折磨", "衰", "骷髅", "敲打", "再见"],
        ["擦汗", "抠鼻", "鼓掌", "糗大了", "坏笑", "左哼哼", "右哼哼", "哈欠"],
        ["鄙视", "委屈", "快哭了", "阴险", "亲亲", "吓", "可怜", "菜刀"],
        ["西瓜", "啤酒", "篮球", "乒乓", "咖啡", "饭", "猪头", "玫瑰"],
        ["凋谢", "示爱", "爱心", "心碎", "蛋糕", "闪电", "炸弹", "刀"],
        ["足球", "瓢虫", "便便", "月亮", "太阳", "礼物", "拥抱", "强"],
        ["弱", "握手", "胜利", "抱拳", "勾引", "拳头", "差劲", "爱你"],
        ["NO", "OK", "爱情", "飞吻", "跳跳", "发抖", "怄火", "转圈"],
        ["磕头", "回头", "跳绳", "挥手", "激动", "街舞", "左太极", "右太极"]
      ]
    };
  },
  methods: {
    clickHandler(i) {
      let emotion = `#${i};`;
      this.$emit("emotion", emotion);
    }
  },
  components: {
    Emotion
  }
};
</script>
<style scoped>
.emotion-box {
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #b4b4b4;
  overflow: hidden;
  overflow-y: auto;
}
.emotion-box-line {
  display: flex;
}
.emotion-item {
  flex: 1;
  text-align: center;
  cursor: pointer;
}
</style>
